<template>
    <div class="screen-block">
        <div class="list">
            <border-box10 v-for="item in option" :key="item">
                <div class="list-con">
                    <div class="title">{{ item.name }}</div>
                    <div class="value">{{ item.value }}</div>
                </div>
            </border-box10>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { useI18n } from 'vue-i18n';
    import { ref } from 'vue';
    import { BorderBox10 } from '@kjgl77/datav-vue3';

    import useTimeExecutor from '@/hooks/useTimeExecutor';
    import { queryBusiness } from '../../service';

    const { t } = useI18n();

    const option = ref<any>([]);
    const fetchData = async () => {
        const data = await queryBusiness();
        const { result } = data as any;
        option.value = [
            { name: t('screen.realAmount'), value: result.realAmount },
            { name: t('screen.totalAmount'), value: result.totalAmount },
            { name: t('screen.totalVolume'), value: result.totalVolume },
            { name: t('screen.orderNum'), value: result.orderNum },
        ];
    };
    // fetchData();
    useTimeExecutor({
        second: 10,
        immediate: true,
        func: fetchData,
    });
</script>

<style lang="less" scoped>
    .screen-block {
        width: 100%;
        height: 100%;

        .list {
            display: grid;
            grid-gap: 20px;
            grid-template-rows: repeat(1, 100%);
            grid-template-columns: 23% 23% 23% 23%;
            width: 100%;
            height: 100%;
            padding: 0;

            .list-con {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
        }

        .title {
            color: rgb(255 255 255 / 65%);
            font-size: 20px;
        }

        .value {
            color: rgb(73 245 248);
            font-weight: bold;
            font-size: 25px;
        }
    }
</style>
